<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"   label-width="90px">
                    <el-form-item label="所属计划:" style="width:250px">
                         <el-input size="mini" clearable v-model="form.data.securityCheckName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="安检员:" style="width:250px">
                      <securityList  v-model="form.data.staffId"  />
                    </el-form-item>
                    <el-form-item label="客户类型:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.customerCateId"  
                            placeholder="请选择">
                            <el-option
                              v-for="item in customerList"
                              :key="item.data.id"
                              :label="item.data.customerCateName"
                              :value="item.data.id">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="入户情况:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.enterRoomSituation"  
                            placeholder="请选择">
                            <el-option
                              v-for="item in situationList"
                              :key="item.value"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="安检结果:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.securityCheckResult"
                            placeholder="请选择">
                            <el-option
                              v-for="item in resultList"
                              :key="item.value"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnReSet">重置</el-button>
                    </el-form-item>
                </el-form>
          </div>

      
            <gridTable title="安检任务列表" :page="page"  :data="tableData" :columnList="columnList">
              <template #tools>
                    <el-button type="primary" size="mini"   icon="el-icon-position" @click="openUrl">任务分析</el-button>
                     <i class="el-icon-upload" title="下载" />
                </template>
                <template #actions="{row}">
                        <el-button  @click="btnDetail(row)"   type="text">查看</el-button>
                  </template>
              </gridTable>
               <el-dialog class="padding-dialog" :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1100px"  :title="title">
               <taskDetail  v-if="dialogVisible" :data="dataDetail" />
            </el-dialog>

  </div>
</template>

<script>
import  {findCusSecurityCheckTaskList,findCusCustomerCate}  from '@/api/user'
import taskDetail from './components/taskDetail'
import gridTable from '@/components/eTable'
import securityList from './components/securityList'

export default {
  components:{
    taskDetail,
    gridTable,
    securityList
  },
  data() {
    return {
        tableData: [],
        dialogVisible:false,
        openStatus:false,
        form: {
          data:{
              staffId:'',
              securityCheckName:'',
              customerCateId:'', 
              enterRoomSituation:'', 
              securityCheckResult:''
          },
          page:1,
          pageSize:10,
        },
        resultList:[{text:'正常',value:1},{text:'隐患',value:2},{text:'未完成',value:3}],
        situationList:[{text:'已完成',value:1},{text:'到访不遇',value:2},{text:'拒绝入户',value:3}],
        saveForm:{
          id:'',
          projectId:'', 
          enterpriseId:'',
          rcAmount:'', 
          rcTime:'',
          rcPeople:'', 
          rcNumber:'',  
          rcStatus:''
        },
        rules: {
          projectId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          enterpriseId: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
          rcAmount: [ { required: true, message: '此项为必填项！', trigger: 'blur' }],
        },
        title:'',
        page:{
            currentPage:1,
            pageSize:10,
            total:0
        },
        customerList:[],
        dataDetail:null,  
        columnList:[
          {label:'所属计划',prop:'securityCheckName',iStrue:false},
          {label:'任务编号',prop:'taskNo',iStrue:true},
          {label:'安检员',prop:'staffId',iStrue:true},
          {label:'安检员工号',prop:'staffId',iStrue:true},
          {label:'客户类型',prop:'customerCateName',iStrue:true},
          {label:'安检地址',prop:'address',width:'300',iStrue:true},
          {label:'客户名称',prop:'customerName',iStrue:true},
          {label:'联系电话',prop:'customerPhone',iStrue:true},
          {label:'客户户号',prop:'doorNo',iStrue:true},
          {label:'入户次数',prop:'enterRoomNum',iStrue:true},
          {label:'上期安检时间',prop:'lastCheckTime',width:'200',iStrue:true},
          {label:'计划安检时间',prop:'expectCheckTime',width:'200',iStrue:true},
          {label:'实际安检时间',prop:'checkedTime',width:'200',iStrue:true},
          {label:'入户情况',prop:'enterRoomSituation',iStrue:true},
          {label:'安检结果',prop:'securityCheckResult',iStrue:true},
          {label:'燃气表号',prop:'meterNo',iStrue:true},
          {label:'读数(m³)',prop:'gasMeterReading',iStrue:true},
          {label:'表具余额(元)',prop:'balance',iStrue:true}      
        ]
    }
  },
  created(){
     this.getPageList()
     this.findCusCustomerCate()
  },
  methods: {
    openUrl(){
      this.$router.push({ path: '/analysis' })
    },
    btnQuery(){
      this.getPageList()
    },
    btnReSet(){
      this.form={
          data:{
              staffId:'',
              securityCheckName:'',
              customerCateId:'', 
              enterRoomSituation:'', 
              securityCheckResult:''
          },
          page:1,
          pageSize:10
        }
    },
    btnDevelop(){
      this.openStatus =!this.openStatus
    },
    findCusCustomerCate(){
           findCusCustomerCate({page:1,pageSize:999,data:{}}).then((res)=>{
               if(res.code==0){
                this.customerList= res.data.data
              }
          })
     },
     getPageList(){
           findCusSecurityCheckTaskList(this.form).then((res)=>{
               if(res.code==0){
                 this.tableData = res.data.data;
                 this.tableData.map((item)=>{
                   item.enterRoomSituation=item.enterRoomSituation==1?'已完成':(item.enterRoomSituation==2?'到访不遇':'拒绝入户')
                   item.securityCheckResult=item.securityCheckResult==1?'正常':(item.securityCheckResult==2?'隐患':'未完成')
                   return item
                 })
                 this.page.total = res.data.total
              }else{
                 this.tableData = []
                  this.page.total = 0
              }
          })
     },

     btnSave(){
           this.$refs['formName'].validate((valid) => {
                if (valid) {
                    saveReceipts(this.saveForm).then((res)=>{
                      if(res.code=200){
                        this.$message({
                          message: '保存成功',
                          type: 'success'
                        });
                        this.dialogVisible = false
                         this.getPageList()
                      }else{
                        this.$message({
                          message: '保存失败',
                          type: 'error'
                        });
                      }
                    })
                } else {
                    return false;
                }
            });
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.form.currentPage = val
        this.getPageList()
      },
      btnOpen(){
        this.saveForm={
          id:'',
          projectId:'', 
          enterpriseId:'',
          rcAmount:'',
          rcTime:'',
          rcPeople:'',
          rcNumber:'',
          rcStatus:''
        }
        this.title='新增信息'
        this.dialogVisible = true
      },
      btnDetail(item){
         this.title='详情'
         this.dataDetail = item
         this.dialogVisible = true
      },
      btnDel(item){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delReceipts(item.id).then((res)=>{
               if(res.code==200){
                 this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                   this.getPageList()
              }else{
                  this.$message({
                          message: '删除失败',
                          type: 'error'
                        });
              }
          })
        }).catch(() => {       
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>